<script lang="ts" setup>
import type { LawyerDetail, LegalCategory } from '@/api/types/home'
import { usePagination, useRequest } from 'alova/client'
import { getLawyerList, getLegalBanner, getLegalClass } from '@/api/homeService'
import HomeServiceCard from '@/components/homeServiceCard/homeServiceCard.vue'
import LawyerPaginationList from '@/components/lawyerPaginationList/lawyerPaginationList.vue'

defineOptions({
  name: 'Home',
})
definePage({
  // 使用 type: "home" 属性设置首页，其他页面不需要设置，默认为page
  type: 'home',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'custom',
    navigationBarTitleText: '%tabbar.home%',
  },
})
const logo = ref('/static/home/icon_app_logo.png')
const keyword = ref('')
const { data: bannerList, loading: bannerLoading } = useRequest(
  getLegalBanner, // 不要加 ()！
  { immediate: true },
)

const { data: classList, loading: classLoading } = useRequest(
  getLegalClass,
  { immediate: true },
)

function onSearch() {
  console.log('搜索内容:', keyword.value)
  // 可以直接跳转搜索页或者调用接口
}
function onCategoryClick(item: LegalCategory) {
  console.log('点击了分类:', item)
}
const lawyerTop = ref(1)
// 分页 hook
const {
  data, // 当前页数据
  page,
  pageSize,
  total,
  pageCount,
  isLastPage,
  fetching,
  removing,
  remove,
} = usePagination(
  (pageNum, size) => getLawyerList({ page: pageNum, pageSize: size }, lawyerTop.value), // 传递 lawyerTop
  {
    initialData: { list: [], total: 0, page: 1, pageSize: 10 },
    initialPage: 1,
    initialPageSize: 10,
    data: res => res.list, // 告诉 usePagination 哪个字段是数组

  },
)

// 文字咨询事件
function onWordConsult(lawyer: LawyerDetail) {
  console.log('文字咨询', lawyer)
  // 跳转或弹窗
}

// 电话咨询事件
function onPhoneConsult(lawyer: LawyerDetail) {
  console.log('电话咨询', lawyer)
  // 跳转或弹窗
}
// 翻页
function handlePrevPage() {
  if (page.value > 1)
    page.value--
}
function handleNextPage() {
  if (!isLastPage.value)
    page.value++
}
function handleSetPageSize() {
  pageSize.value = 20
}
</script>

<template>
  <view class="h-full w-full bg-[url(/static/home/icon_home_bg.png)] pt-safe">
    <view class="w-full flex items-center bg-transparent px-4 py-2 shadow-md">
      <!-- 左侧搜索图标 -->
      <image
        :src="logo"
        class="mx-4 h-6 w-6"
        mode="aspectFit"
      />

      <!-- 搜索框主体 -->
      <!-- 小程序端 -->
      <!-- #ifdef MP-WEIXIN -->
      <input
        v-model="keyword"
        type="text"
        :placeholder="$t('searchPlaceholder')"
        class="mr-30 h-10 flex-1 rounded-full bg-gray-100 px-3 text-sm focus:outline-none"
        style="padding-right:50rpx;"

        @confirm="onSearch"
      >
      <!-- #endif -->

      <!-- H5 端 -->
      <!-- #ifndef MP-WEIXIN -->
      <input
        v-model="keyword"
        type="text"
        :placeholder="$t('searchPlaceholder')"
        class="mr-20 h-10 flex-1 rounded-full bg-gray-100 px-3 text-sm focus:outline-none"
        @confirm="onSearch"
      >
      <!-- #endif -->
    </view>
    <scroll-view class="h-[calc(100vh-120px)]" scroll-y>
      <HomeServiceCard
        :loading="bannerLoading"
        :left-top="bannerList?.[0]"
        :right="bannerList?.[1]"
        :left-bottom="bannerList?.[2]"
      />

      <LegalCategoryGrid
        :loading="classLoading"

        :items="classList || []"
        @click="onCategoryClick"
      />
      <view class="mt-4">
        <view class="flex flex-row items-center justify-between rounded-lg bg-white px-4 py-2">
          <!-- 左侧小图标，靠左 -->
          <image
            src="/static/home/icon_lawyer_jing.png"
            mode="aspectFit"
            class="h-6 w-14"
          />

          <!-- 右侧带背景的文字 -->
          <view class="ml-4 flex flex-row items-center rounded-[11pt] bg-[#FCF5EE] px-4 py-1">
            <image
              class="h-4 w-4 object-contain"
              src="/static/home/icon_lawyer_review.png"
              mode="aspectFit"
            />
            <text class="mr-2 text-left text-[14px] text-[#7E5113] font-bold leading-[20px] font-serif not-italic">精选律师·真实律师认证</text>
          </view>
        </view>
      </view>
      <LawyerPaginationList
        :fetching="fetching"
        :data="data"
        :page="page"
        :page-size="pageSize"
        :total="total"
        :page-count="pageCount"
        :is-last-page="isLastPage"
        :removing="removing"
        :handle-prev-page="handlePrevPage"
        :handle-next-page="handleNextPage"
        :handle-set-page-size="handleSetPageSize"
        :on-word-consult="onWordConsult"
        :on-phone-consult="onPhoneConsult"
      />
    </scroll-view>
  </view>
</template>
